<template>
    <div class="content">
        <div class="tab">
            <div class="radio-inputs">
                <label v-for="feature in this.result.features_names" :key="feature" class="radio"
                    @click="makeChart(feature)">
                    <input type="radio" name="radio" :value="feature" :checked="feature === '月就诊次数_MAX'">
                    <span class="name">{{ feature }}</span>
                </label>
            </div>
        </div>

        <el-row>
            <el-card shadow="hover" id="res_1" class="res_1">
            </el-card>
        </el-row>

        <el-row>
            <el-card shadow="hover" id="res_0" class="res_0">
            </el-card>
        </el-row>
    </div>

</template>

<script>
import * as echarts from 'echarts';

export default {
    data() {
        return {
            name: '请选择',
        }
    },
    methods: {
        makeChart(feature) {
            this.name = feature;
            // 根据条件筛选出 RES 为 1 和为 0 的数据，并提取月统筹金额_MAX列的值
            const column2_values_res_1 = this.result.data.filter(item => item.识别结果 === 1).map(item => item[feature]);
            const column2_values_res_0 = this.result.data.filter(item => item.识别结果 === 0).map(item => item[feature]);

            // 统计直方图的频次
            const binCount = 10;

            const calculateHistogram = (column2_values) => {
                const minValue = Math.min(...column2_values);
                const maxValue = Math.max(...column2_values);
                const binWidth = (maxValue - minValue) / binCount;

                const hist_bins = Array.from({ length: binCount + 1 }, (_, i) => minValue + i * binWidth);
                const hist_data = new Array(binCount).fill(0);

                for (let value of column2_values) {
                    const binIndex = Math.floor((value - minValue) / binWidth);
                    hist_data[binIndex]++;
                }

                return { hist_bins, hist_data };
            };

            var { hist_bins: hist_bins_res_1, hist_data: hist_data_res_1 } = calculateHistogram(column2_values_res_1);
            var { hist_bins: hist_bins_res_0, hist_data: hist_data_res_0 } = calculateHistogram(column2_values_res_0);

            // 输出处理后的数据
            console.log("hist_bins_res_1:", hist_bins_res_1);
            console.log("hist_bins_res_0:", hist_bins_res_0);
            console.log("hist_data_res_1:", hist_data_res_1);
            console.log("hist_data_res_0:", hist_data_res_0);

            hist_bins_res_1 = hist_bins_res_1.map(value => Number(value.toFixed(3)));
            hist_data_res_1 = hist_data_res_1.map(value => Number(value.toFixed(3)));
            hist_bins_res_0 = hist_bins_res_0.map(value => Number(value.toFixed(3)));
            hist_data_res_0 = hist_data_res_0.map(value => Number(value.toFixed(3)));

            // 销毁已有的图表实例
            echarts.dispose(document.getElementById('res_1'))
            let chart_res_1 = echarts.init(document.getElementById('res_1'));

            let xAxisName = feature.length > 7 ? feature.substring(0, 7) + '...' : feature;
            let text = feature;

            let option_res_1 = {
                title: {
                    text: feature + '(欺诈)'
                },
                xAxis: {
                    type: 'category',
                    data: hist_bins_res_1,
                    name: xAxisName
                },
                yAxis: {
                    type: 'value',
                    name: '人数'
                },
                dataZoom: [{ type: 'inside' }, { type: 'slider' }],
                series: [{
                    type: 'bar',
                    data: hist_data_res_1,
                    itemStyle: {
                        color: 'blue'
                    }
                }]
            };

            // 设置全局配置
            option_res_1.visualMap = {
                max: Math.max(Math.max(...this.result.fraud_data.fraud_counts), Math.max(...this.result.fraud_data.non_fraud_counts))
            };
            chart_res_1.setOption(option_res_1);

            // 销毁已有的图表实例
            echarts.dispose(document.getElementById('res_0'))
            let chart_res_0 = echarts.init(document.getElementById('res_0'));

            let option_res_0 = {
                title: {
                    text: feature + '(非欺诈)'
                },
                xAxis: {
                    type: 'category',
                    data: hist_bins_res_0,
                    name: xAxisName
                },
                yAxis: {
                    type: 'value',
                    name: '人数'
                },
                dataZoom: [{ type: 'inside' }, { type: 'slider' }],
                series: [{
                    type: 'bar',
                    data: hist_data_res_0,
                    itemStyle: {
                        color: 'green'
                    }
                }]
            };

            // 设置全局配置
            option_res_0.visualMap = {
                max: Math.max(Math.max(...this.result.fraud_data.fraud_counts), Math.max(...this.result.fraud_data.non_fraud_counts))
            };
            chart_res_0.setOption(option_res_0);
        },
    },
    computed: {
        result() {
            return this.$store.state.processedData.result;
        },
    },
    mounted() {
        this.makeChart("月就诊次数_MAX");
    },
    watch: {
        result: {
            handler(newVal) {
                if (newVal) {
                    this.makeChart("月就诊次数_MAX");
                }
            },
            deep: true
        }
    }
}
</script>

<style land="less" scoped>
@import '../../style/select/select.css';
@import '../../style/button/button_menu.css';
@import '../../style/radio/radio.css';

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #cde4de;
    color: #141212;
}

::-webkit-scrollbar {
    height: 3px;
}

::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
}

.content {
    padding: 0;

    .tab {
        width: 160vh;
        overflow-x: auto;
        /* 添加横向滚动 */
        white-space: nowrap;
        /* 防止标签换行 */
        margin-bottom: 5px;


        .radio-inputs {
            width: 430vh;
            border-radius: 4px;
            margin-bottom: 0;
        }

    }

    /* .flex-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow-x: auto;

        margin-top: 0;
        margin-right: 30px;
        margin-bottom: 5px;

        .btn_menu {
            width: 100%;
            height: 40px;
        }
    } */

    .res_1 {
        width: 160vh;
        height: 40vh;
        margin-bottom: 10px;
    }

    .res_0 {
        width: 160vh;
        height: 40vh;
    }
}
</style>
